// components/item-components/category-component.js

const util = require('../../util/util.js');
const app = getApp()

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    arr_items: {
      type: Array,
      value: [],
      observer(newValue,oldValue,changedPath){
        this._private_updateUI()
      }
    },
    scroll_view_width:{
      type: Number,
      observer(newValue, oldValue, changedPath) {
        this._private_updateUI()
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    offsetValue: 0,
    scrollWidth: 0,
    total_offset: 0,
    move_animation:{},
    isArrowHidden: false,
    itemWidth:75
  },

  ready: function () {
    var animation = util.moveXAnimation(0);
    var screenW = app.globalData.screenW;

    if (screenW === 0) {
      //  获取屏幕宽度
      var that = this;
      wx.getSystemInfo({
        success: function (res) {
          let screenWidth = res.screenWidth;
          that.setData({
            scroll_view_width: (screenWidth - 40),
            total_offset: (screenWidth - 40)
          })
        }
      });
    }
    else {
      this.setData({
        scroll_view_width: (screenW - 40),
        total_offset: (screenW - 40)
      })
    }
    this.setData({
      move_animation: animation.export()
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //  更新UI显示
    _private_updateUI:function(){
      let categoryCount = this.data.arr_items.length;
      let pannelWidth = this.data.scroll_view_width;
      var tmpItemWidth = 75.0
      if (categoryCount > 0 && categoryCount < 4) {
        tmpItemWidth = this.data.scroll_view_width / categoryCount
      }

      this.setData({
        isArrowHidden: categoryCount < 4 ? true : false,
        itemWidth: tmpItemWidth > 75.0 ? tmpItemWidth : 75
      })
    },

    //  滑动操作
    _didScroll: function (event) {

      var offsetValue = event.detail.scrollLeft;
      var scrollWidth = event.detail.scrollWidth;
      if (this.data.scrollWidth == 0) {
        this.setData({
          scrollWidth: scrollWidth,
          total_offset: scrollWidth - this.data.scroll_view_width
        })
      }
      this.setData({
        offsetValue: offsetValue
      })
    },
    //  滑动到最左边
    _scrollToLeft: function () {
      this.setData({
        offset: 0
      })
    },
    //  滑动到最右边
    _scrollToRight: function () {
      this.setData({
        offset: this.data.total_offset
      })
    },
    //  点击操作
    _didSelected: function (event) {

      let moveX = event.currentTarget.offsetLeft;

      var animation = util.moveXAnimation(moveX);

      var selectedId = event.target.dataset.id;
      var tmpItems = this.data.arr_items;
      var selectedItem = tmpItems[0];
      tmpItems.forEach((tmpItem) => {
        tmpItem.selected = tmpItem.id === selectedId ? true : false;
        if (tmpItem.selected) {
          selectedItem = tmpItem;
        }
      })

      this.setData({
        arr_items: tmpItems,
        move_animation: animation.export()
      });

      this.triggerEvent('event', selectedItem, "myEventOption")
    }
  }
})
